<template>
    <ul class="table-columns" :key="prop">
        <li :class="['table-title',textAlign]" :key="prop" :style="{...style}">{{label}}</li>
        <li :class="['table-cell',textAlign]" v-for="data in dataSource" :key="data.id">
          <slot name="default" :data="data" :value="data[prop]">
            {{data[prop]}}
          </slot>
        </li>
    </ul>
</template>

<script lang='ts'>
import { PropType, ref } from "vue"
import { TableCell, HeaderStyle, RealHeaderStyle, TableLayout, TableAlign } from "@types"

export default {
  props: {
    dataSource: {
      type: Array as PropType<TableCell[]>,
      default: () => []
    },
    prop: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      require: true
    },
    headerStyle: Object as PropType<HeaderStyle>, // 由表格传过来的
    layout: {
      type: String as PropType<TableLayout>,
      default: "horizon"
    },
    width: {
      type: String,
      default: ""
    }, // 单列
    align: {
      type: String as PropType<TableAlign>,
      default: "left"
    }
  },

  setup (props, context) {
    const style = ref<RealHeaderStyle>({})
    const textAlign = ref(props.align)
    const colWidth = ref(props.width)
    // 默认样式与自定义样式
    const HS = props.headerStyle || undefined
    if (props.layout === "horizon") {
      // 【头左体右】表格
      style.value.minWidth = "180px" // 默认样式
      if (HS) {
        style.value = {
          ...style.value,
          ...HS
        }
      }
    } else {
      // 正常方向表格 【头上体下】表格
      if (HS) {
        style.value = { ...HS }
        if (HS.width) {
          style.value.minWidth = HS.width // 避免头部的宽度小于内容宽度
        }
        if (HS.height) {
          style.value.minHeight = HS.height
          style.value.lineHeight = HS.height
        }
      }
      style.value.minWidth = colWidth.value // 列的样式覆盖表格的样式
    }

    return {
      style,
      textAlign
    }
  }
}

</script>

<style lang="less">

.table-cell,.table-title{
  padding: @itemSpace;
}

.table-columns{
    .center{
      text-align: center;
    }
    .left{
      text-align: left;
    }
    .right{
      text-align: right;
    }
}

</style>
